<!-- 查看自己的提问列表 -->
<template>
<div>
    <h1>个人的提问列表</h1>
    <el-table :data="questionData" style="width: 100%">
        <el-table-column label="发布日期" width="200">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ dateFormat(scope.row.createTime) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="作者" width="180">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>姓名: {{ scope.row.author }}</p>
                    <p>标题: {{ scope.row.title }}</p>

                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.author }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="标题">
            <template slot-scope="scope">
                <router-link :to="{name:'article',params :{id :scope.row.id}}" tag="span" class="art-title">
                    <a>{{scope.row.title}}</a>
                </router-link>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
<!--    分页组件-->
    <div class="block pagination">
        <el-pagination background="#f9f9f9" layout="prev, pager, next" :total="page.total" :page-size="page.size" @current-change="Onchange"></el-pagination>
    </div>

    <el-dialog title="修改评论的信息" :visible.sync="alterDialogVisable" height="500px" show-close="true" fullscreen="true" v-loading.fullscreen.lock="loading">

        在这里更新
        <!--对话框-->
        <el-row type="flex" justify="left" v-loading.fullscreen.lock="loading">
            <el-form label-width="70px" label-position="right" style="">
                <el-form-item label="输入标题">
                    <el-input v-model="Question.title" type="textarea" :rows="3" placeholder="请输入内容">
                    </el-input>
                </el-form-item>
                <el-form-item label="问题标签">
                    <el-select v-model="tagList" multiple placeholder="请选择">
                        <el-option v-for="item in allTags" :key="item.id" :label="item.tagname" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="问题描述">
                    <el-input v-model="Question.description" type="textarea" :rows="5" placeholder="输入问题描述">
                    </el-input>
                </el-form-item>
                <el-form-item label="问题内容">
                    <!--                富文本编辑器-->
                    <mavon-editor @change="updateDoc" ref="editor" v-model="Question.content">
                    </mavon-editor>
                </el-form-item>
            </el-form>
        </el-row>
        <span slot="footer" class="dialog-footer" style="margin-top:10px">
            <el-button @click="handlerUpdate" size="mini">确定</el-button>
            <el-button type="primary" @click="alterDialogVisable = false" size="mini">取消</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
import { getcurUserQuestion} from "../api";
import {getQuestionByID} from "../api";

import {
    mavonEditor
} from "mavon-editor";

import "mavon-editor/dist/css/index.css";

import {
    updateQuestion
} from "../api"
import storage from "../model/storage";

export default {
    data() {
        return {
            loading: false,
            alterDialogVisable: false,
            questionData: [],
            curUid:'',
            //问题信息
            Question: {
                //文章标题
                title: '',
                //文章描述
                description: '',
                //文章作者
                author: 'xiong',
                //作者ID
                uid: 1,
                //文章内容
                content: '',
                //html的content
                contentFormat: ''
                //封面？

            },
            //问题的标签
            questionTags: {},
            //已经选择的标签列表(存的是标签的ID数组)
            tagList: [],
            //可以选择的标签列表
            allTags: [{
                id: '',
                tagname: ''
            }],
            doc: '',
            //分页的数据
            page: {
                current: 1,
                size: 5,
                total: 5
            }
        }
    },

    created() {
        this.curUid=storage.get("uid");
        console.log(this.curUid)
        getcurUserQuestion(this.curUid, 1).then(result => {
            this.questionData = result.data.result.records
            console.log(this.questionData)
        });
    },
    mounted() {

    },
    components: {
        mavonEditor
    },
    methods: {
        Onchange(val) {
            console.log(`当前页: ${val}`);
            this.page.current = val;
            getcurUserQuestion(this.curUid,this.page.current);
        },
        updateDoc(markdown, html) {

            this.Question.content = markdown;
            this.Question.contentFormat = html;
        },
        handlerUpdate() {
            this.loading = true;
            console.log("点击了确定更新对话框")
            updateQuestion(this.Question).then(result => {
                console.log(result.data)
                this.loading = false;
                this.alterDialogVisable = false;
                this.$message.success("更新完成")
            })

        },
        dateFormat: function (time) {
            var date = new Date(time);
            var year = date.getFullYear();
            /* 在日期格式中，月份是从0开始的，因此要加0
             * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
             * */
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            // 拼接
            return year + "-" + month + "-" + day + " / " + hours + ":" + minutes + ":" + seconds;
        },

        handleEdit(index, row) {
            console.log(index, row);
            this.Question = row;
            this.alterDialogVisable = true;
        },

        handleDelete(index, row) {
            console.log(index, row);
        }
    }
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
